import React from 'react';
import { sleep } from 'antd-mobile/es/utils/sleep'
const OrderIndex = () =>{
    const [orderlist, SetOrderList] = React.useState<any>([]);
    const [hasMore, SethasMore] = React.useState(false);
    const [page, SetPage] = React.useState(1)
    const [status, SetStatus] = React.useState('all')
    const statuslist = [
        {
            id: 'all',
            name: '全部'
        },
        {
            id: '0',
            name: '未支付'
        },
        {
            id: '1',
            name: '已支付'
        },
        {
            id: '2',
            name: '已入住'
        },
        {
            id: '3',
            name: '已退房'
        },
        {
            id: '4',
            name: '已评价'
        },
        {
            id: '-1',
            name: '售后'
        }
    ]

    React.useEffect(() =>{
        GetOrderData();
    },[status])

    const GetOrderData = async() =>
    {
        let result = await React.HTTP.post('/order/index', {
            busid: React.Business.id,
            page: page,
            status: status
        })

        if(result.code == 0)
        {
            //没有更多数据
            SethasMore(false);
            return false
        }
        else
        {
            //设置分页和列表合并
            SethasMore(true)
            SetOrderList(orderlist.concat(result.data))
            SetPage(page + 1)
        }
    }

    const OnRefresh = async() =>
    {
        SetPage(1)
        SetOrderList([])
        SethasMore(true)

        await sleep(1000);
        await GetOrderData();
    }

    const loadMore = async() => 
    {
        await sleep(500)
        GetOrderData()
    }
    
    const TabChange = async(val: string) =>
    {
        SetStatus(val)
        SetPage(1)
        SetOrderList([])
        SethasMore(true)
        // await sleep(1000)
        // await OnRefresh();
    }

    const Pay = async(orderid: any) =>
    {
        React.navigate(`/room/pay?orderid=${orderid}`)
    }

    // 功能组件
    const ButtonList = (item:any) =>
    {
        if(item.status == '1')
        {
            return (
                <React.UI.Button color='danger' size='small' onClick={() => RefundEvent(item.id)}>申请退款</React.UI.Button>
            )
        }
        else if(item.status == '0')
        {
            return (
                <React.UI.Button color='success' size='small' onClick={() => Pay(item.id)}>确认支付</React.UI.Button>
            )
        }
        else if(item.status == '3' && !item.rate)
        {
            return (
                <React.UI.Button color='warning' size='small' onClick={() => React.navigate(`/order/rate?orderid=${item.id}`)}>立即评价
                </React.UI.Button>
            )
        }
    }

    // 申请退款
    const RefundEvent = (orderid: any) =>
    {
        React.UI.Dialog.confirm({
            title: '申请退款',
            content: '确认是否申请退款?',
            onConfirm: async() => 
            {
                let result = await React.HTTP.post('/order/refund', {
                    busid: React.Business.id,
                    orderid: orderid
                })
                if (result.code == 1) 
                {
                    await OnRefresh();
                    React.success(result.msg)
                }
                else 
                {
                    React.error(result.msg)
                }
            }
        }).catch(() => {})
    }

    return(
        <>
            <link rel="stylesheet" href="/assets/css/order.css"></link>
            {/* 选项卡 */}
            <React.UI.Tabs activeKey={status}  onChange={TabChange}>
                {
                    statuslist.map((item:any) =>{
                        return(
                            <React.UI.Tabs.Tab title={item.name} key={item.id}>
                            </React.UI.Tabs.Tab>
                        )
                    })
                }
            </React.UI.Tabs>

            {/* 列表结构  */}
            <React.UI.PullToRefresh onRefresh={OnRefresh}>
                <React.UI.List>
                    <div className="order_list">
                        {
                            orderlist.map((item: any) =>{
                                return(
                                    <div className="item" key={item.id}>
                                        <div className="item_top">
                                            <p>{item.room.name}</p>
                                            <div className="top_tag">{item.status_text}</div>
                                        </div>
                                        <div className="house">
                                            <div className="item_swipers">
                                                <img src={item.room.thumb_text} alt=""/>
                                            </div>
                                            <div className="item_times">
                                                <div>
                                                    <div>{item.starttime_text}</div>
                                                    <div> {item.startday_text} </div>
                                                </div>
                                                <div>
                                                    <div>共{item.day_text}晚</div>
                                                    <div className="item_right">
                                                        <img src="/assets/images/right1.png" alt=""/>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div>{item.endtime_text}</div>
                                                    <div>{item.endday_text}</div>
                                                </div>
                                                <div>
                                                    <div className="item_pay">订单总价</div>
                                                    <div className="item_price">￥{item.price}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="item_bar">

                                            {ButtonList(item)}
                                            <React.UI.Button color='primary' size='small' onClick={() => React.navigate(`/order/info?orderid=${item.id}`)}>查看详情
                                            </React.UI.Button>
                                            
                                        </div>
                                    </div>
                                )
                            })
                        }        
                    </div>
                </React.UI.List>
                {/* 列表滚动到底部自动加载更多数据。 */}
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>
        </>
    )
}
export default OrderIndex;